
/* eslint-disable */
import * as d3 from "d3"
import moment from "moment"
import { xHeader } from "./x"

//1、新建svg画布
const height = 300, width = 800, marginBottom = 40

let svg = d3.create("svg").attr("height", height).attr("width", width).attr("class", "box")
document.body.appendChild(svg.node())

const fontSize = 16
const startTime = "2023-12-1"
const endTime = "2024-2-1"
const totalDayCount = moment(endTime).diff(moment(startTime), 'day') + 1
const step = (fontSize / 10) * 40

const defs = svg.append("defs")
defs.append("clipPath").attr("id", "clipper").append('rect')
    .attr("x", 0).attr("y", 0).attr("width", width).attr("height", height)

const chart = svg.append("g")
    .attr("class", "chart-scene")
    .attr("clip-path", "url(#clipper)")
const headerParams = {
    fontSize,
    startTime,
    endTime,
    totalDayCount,
    step,
    height
}

const { xAxisYOffsets } = xHeader(chart, headerParams)

// xHeader(chart, { ...headerParams, everyDay: 3 })


// const sw = svg.attr("width"), sh = svg.attr("height")

// // 此外可以使用上面不同的api方法调整缩放效果
const zoom = d3.zoom()
    .extent([[0, 0], [width, height]])// 设置viewBox
    .scaleExtent([1, 4]) //设置缩放最大比例
    .duration(200) // 设置鼠标双击生效时间
    .on('zoom', function (event) {   // 监听缩放事件 event是拿到的dom元素

        let x = event.transform.x

        // chart.selectAll(".x-axis").attr("transform", function (d, index, group) {
        //     let dx = x, dy = xAxisYOffsets[index] || 0
        //     if (dx > 0) {
        //         dx = 0
        //     }
        //     console.log("tansX", dx, dy)
        //     return `translate(${dx},${dy})`
        // })

        if (event.transform.x > 10) {
            event.transform.x = 10
            return
        }

        console.log("zoom", event.transform)
        event.transform.y = 178
        d3.select(".x-axis").attr("transform", event.transform)
    })

const zoomRect = svg.append('rect').classed("zoom-rect", true).attr("x", 0).attr("y", 0).attr("width", width).attr("height", height).attr("fill", "none")
svg.call(zoom)


// svg.call(zoom) // 取消滚轮缩放



export function tranx(per) {
    let width = Number(chart.attr("width"))
    let sw = Number(svg.attr("width"))
    let x = width * per * -1

    let left = width + x
    if (left < sw - marginBottom) {
        left = x + sw - 40
    }



    // chart.selectAll(".x-axis").attr("transform", function (d, index, group) {
    //     let dx = left, dy = xAxisYOffsets[index] || 0
    //     return `translate(${dx},${dy})`
    // })
}

export function scaleXAxis(dayCount) {
    console.log("dayCount", dayCount)

    let scale = 3 / dayCount
    let step = scale * (fontSize / 10) * 40
    headerParams.step = step
    headerParams.everyDay = dayCount
    xHeader(chart, headerParams)
}